<template>
	<div class="page-container">
		<h1>BMI计算器</h1>
		<el-form ref="form" :model="form" label-width="80px">
			<el-form-item label="身高(cm)">
				<el-input v-model.number="form.height" placeholder="请输入身高"></el-input>
			</el-form-item>
			<el-form-item label="体重(kg)">
				<el-input v-model.number="form.weight" placeholder="请输入体重"></el-input>
			</el-form-item>
			<el-form-item label="BMI指数">
				<el-input v-model="bmi" readonly></el-input>
			</el-form-item>
			<el-form-item label="健康状况">
				<el-radio-group v-model="indexType" size="medium">
					<el-radio-button :label="0">中国标准</el-radio-button>
					<el-radio-button :label="1">国际标准</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="calculateBMI">计算BMI</el-button>
				<el-button @click="resetForm">重置</el-button>
			</el-form-item>
			<el-form-item>
				<p>{{ indexText }}</p>
			</el-form-item>
		</el-form>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					height: '',
					weight: ''
				},
				bmi: 0,
				indexType: 0
			}
		},
		computed: {
			indexText() {
				if (!this.bmi) {
					return '';
				}
				if (this.indexType) {
					if (this.bmi < 16) {
						return '严重消瘦 Severe Thinness';
					} else if (this.bmi < 17) {
						return '中度消瘦 Moderate Thinness';
					} else if (this.bmi < 18.5) {
						return '轻度消瘦 Mild Thinness';
					} else if (this.bmi < 25) {
						return '正常体重 Normal';
					} else if (this.bmi < 30) {
						return '超重 Overweight';
					} else if (this.bmi < 35) {
						return 'I度肥胖 Obese Class I';
					} else if (this.bmi < 40) {
						return 'II度肥胖 Obese Class II';
					} else {
						return 'III度肥胖 Obese Class III';
					}
				} else {
					if (this.bmi < 18.5) {
						return '偏瘦';
					} else if (this.bmi < 25) {
						return '正常';
					} else if (this.bmi < 28) {
						return '偏胖';
					} else {
						return '肥胖';
					}
				}
			}
		},
		methods: {
			calculateBMI() {
				const {
					height,
					weight
				} = this.form;
				if (!height || !weight) {
					this.$message.error("请输入身高和体重！");
					return;
				}

				const heightInMeters = height / 100;
				this.bmi = (weight / (heightInMeters * heightInMeters)).toFixed(2);
			},
			resetForm() {
				this.form.height = '';
				this.form.weight = '';
				this.bmi = 0;
				this.indexType = 0;
			}
		}
	}
</script>

<style>
	p {
		font-size: 18px;
		margin-top: 10px;
	}
</style>